<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="#{messages.Teacher} #{messages.Password}"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <h:form styleClass="jsfcrud_list_form" id="form1">
                <h:panelGrid columns="2">
                    <h:outputLabel value="#{messages.Name1}"/>
                    <h:outputText value="#{teacherAdminController.logined.secondname} #{teacherAdminController.logined.firstname}"/>
                    <h:outputLabel value="#{messages.Old}#{messages.Password}"/>
                    <h:inputSecret value="#{teacherAdminController.oldPassword}" required="true"/>
                    <h:outputLabel value="#{messages.New}#{messages.Password}"/>
                    <h:inputSecret value="#{teacherAdminController.updatedPassword1}" required="true" id="pwd1"/>
                    <h:outputLabel value="#{messages.Reinput}#{messages.New}#{messages.Password}"/>
                    <h:inputSecret required="true" onblur="validate()" id="pwd2"/>
                    <h:commandButton action="#{teacherAdminController.exeChangePassword()}" value="#{messages.Update}" 
                                     id="myupdate"/>
                </h:panelGrid>

                <script>
                   
                    function validate() {
                        var pwd1 = document.getElementById("form1:pwd1").value;
                        var pwd2 = document.getElementById("form1:pwd2").value;

                        if (pwd1 !== pwd2) {
                            alert("#{messages.DifferentPassword}");
                        } 
                    }
                </script>
            </h:form>
        </ui:define>
    </ui:composition>

</html>



